<template>
  <WithDialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :confirm-btn-loading="loading"
    title="群发通知"
    width="60%"
    confirm-text="确认发送"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <div class="mass-send-form">
      <el-form
        ref="elFormRef"
        :model="formModel"
        label-width="auto"
        label-position="left"
        :rules="rules"
      >
        <el-form-item
          label="通知标题"
          prop="title"
        >
          <el-input
            v-model="formModel.title"
            clearable
            placeholder="请输入通知标题"
          />
        </el-form-item>

        <el-form-item
          label="通知内容"
          prop="content"
        >
          <RichTextEditor
            ref="richEditorRef"
            v-model="formModel.content"
            show-upload-image
          />
        </el-form-item>

        <el-form-item
          label="接收人员"
          prop="recipient"
        >
          <el-button
            type="text"
            @click="handleOpenUserSelect"
          >
            {{
              formModel.recipient.length ? `已选择${formModel.recipient.length}人` : '选择通知接收人'
            }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <UserSelectModal
      v-model="formModel.recipient"
      :visible.sync="userSelectVisible"
      @onConfirm="handleUserSelectConfirm"
    />
  </WithDialog>
</template>
<script>
import WithDialog from '@/components/WithDialog/withDialog.vue'
import RichTextEditor from '@/components/RichTextEditor/RichTextEditor.vue'
import UserSelectModal from '@/components/UserSelectModal/UserSelectModal.vue'

export default {
  name: '',
  components: {
    RichTextEditor,
    WithDialog,
    UserSelectModal
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formModel: {
        title: '',
        content: '',
        recipient: []
      },

      rules: {
        title: [
          { required: true, message: '请输入通知标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入通知内容', trigger: 'blur' }
        ],
        recipient: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value.length === 0) {
                callback(new Error('请选择接收人员'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      },

      userSelectVisible: false
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(v) {
        this.$emit('update:visible', v)
      }
    }
  },
  watch: {
    visible(v) {
      if (v) {
        this.$refs?.elFormRef?.resetFields()
        this.$refs?.richEditorRef?.clearEditorContent()
      }
    }
  },
  methods: {
    handleConfirm() {
      this.$refs.elFormRef.validate(valid => {
        if (!valid) {
          return this.$message.error('请将信息填写完整')
        }

        this.$emit('confirm', this.formModel)
      })
    },

    handleCancel() {
      this.close()
    },

    close() {
      this.$emit('update:visible', false)
    },

    handleOpenUserSelect() {
      this.userSelectVisible = true
    },

    handleUserSelectConfirm() {
      if (this.formModel.recipient.length) {
        this.$refs.elFormRef.clearValidate('recipient')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
